<template>
  <div class="main-content">
    <div style="display: flex; grid-gap: 10px;">
      <!-- 分类开始-->
      <div style="width: 150px; padding: 10px; background-color: #eeeeee">
        <div style="text-align: center;margin-bottom: 20px">
          <img src="@/assets/img/img.png" style="width: 50%">
          <div style="font-size:13px;color: #333333">莫夫年华，少年正当时</div>
        </div>
        <el-row :gutter="10">
          <el-col :span="12" style="text-align: center;margin-bottom: 10px" v-for="item in data.categoryList" :key="item.id">
            <a style="color: #333333" :href="'/front/book?categoryName=' +item.name">{{item.name}}</a>
          </el-col>
        </el-row>
      </div>
      <!-- 分类结束-->
      <!-- 轮播图开始 -->
      <div style="flex: 1">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in data.imgs" :key="item">
            <img :src="item" alt="" style="width: 100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播图结束 -->
      <!-- 排行榜开始 -->
      <div style="width: 240px ;padding: 10px">
        <div style="color: goldenrod;font-size: 20px;margin-bottom: 15px">图书借阅排行榜</div>
        <div  @click="goPage('/front/bookDetail?id=' + item.id)" v-for="(item,index) in data.rankBookList" :key="item.id"
             style="padding: 10px 0; cursor: pointer; border-bottom: 1px solid #ddd">
          <div style="display: flex; grid-gap: 10px" v-if="index === data.currentIndex">
            <div style="width: 10px;color: orangered;font-weight: bold">{{index+1}}</div>
            <div style="width: 50px">
              <img :src="item.cover" style="width: 100%">
            </div>
            <div style="flex: 1;width: 0;font-size: 12px">
              <div style="margin-bottom: 10px" class="line1">{{item.name}}</div>
              <div style="color: #666" class="line2">{{item.descr}}</div>
            </div>
          </div>
          <div @mouseover="changeIndex(index)" v-else style="display: flex; align-items: center; grid-gap: 10px">
            <div style="width: 10px">{{index+1}}</div>
            <div style="flex: 1;width: 0;font-size: 12px" class="line1">{{item.name}}</div>
          </div>
        </div>
      </div>
      <!-- 排行榜结束 -->
    </div>

    <div style="display:flex; grid-gap: 30px">
      <!-- 左边区域开始-->
      <div style="flex: 1">
        <div style="margin: 20px 0">
          <div style="padding-bottom: 10px;color: #1149a9;border-bottom: 1px solid #1149a9; margin-bottom: 10px">
              <strong style="font-size: 24px">新</strong> 书上架
          </div>
          <div>
              <el-row :gutter="20">
                <el-col @click="goPage('/front/bookDetail?id='+item.id)" :span="6" v-for="item in data.newBookList" :key="item.id" style="margin-bottom: 20px">
                  <div class="book-box">
                    <img :src="item.cover" style="width: 90%">
                  </div>
                  <div style="margin: 5px 0">{{item.name}}</div>
                  <div style="margin: 5px 0;font-size: 12px;color: #666666" class="line1">{{item.author}}</div>
                  <div style="margin: 5px 0;font-size: 12px;color: #666666">库存:{{item.store}}</div>
                </el-col>
              </el-row>
          </div>
        </div>

        <div style="margin: 20px 0">
          <div style="padding-bottom: 10px;color: orangered;border-bottom: 1px solid orangered; margin-bottom: 10px">
            <strong style="font-size: 24px">推荐</strong> 读物
          </div>
          <div>
            <el-row :gutter="20">
              <el-col  @click="goPage('/front/bookDetail?id='+item.id)" :span="6" v-for="item in data.recommendBookList" :key="item.id" style="margin-bottom: 20px">
                <div class="book-box">
                  <img :src="item.cover" style="width: 90%">
                </div>
                <div style="margin: 5px 0">{{item.name}}</div>
                <div style="margin: 5px 0;font-size: 12px;color: #666666" class="line1">{{item.author}}</div>
                <div style="margin: 5px 0;font-size: 12px;color: #666666">库存:{{item.store}}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 左边区域结束-->

      <!-- 右边区域开始-->

      <div style="width: 300px">
        <div style="margin: 20px 0">
          <div style="display: flex; padding-bottom: 10px;align-items: flex-end; border-bottom: 1px solid mediumpurple; margin-bottom: 10px">
            <div style="flex: 1;color: mediumpurple"><strong style="font-size: 24px">社区</strong> 热帖</div>
            <div style="cursor: pointer" @click="goPage('/front/posts')">更多>></div>
          </div>
          <div>
            <div  v-for="item in data.postsList" :key="item.id"
                 style="color: #666;border-bottom: 1px dashed #ccc;padding-bottom: 10px">
              <div @click="goPage('/front/postsDetail?id='+item.id)" class="line1 title" style="margin-bottom: 15px">{{item.title}}</div>
              <div>
                <span style="margin-right: 20px"><el-icon size="16" style="top: 2px"><View /></el-icon>{{item.readCount}}</span>
                <span style="margin-right: 20px"><el-icon size="16" style="top: 2px"><ChatDotSquare /></el-icon>{{item.commentCount}}</span>
                <span style="margin-right: 20px"><el-icon size="16" style="top: 2px"><User /></el-icon>{{item.userName}}</span>
              </div>
            </div>
          </div>
        </div>


        <div style="margin: 20px 0">
          <div style="display: flex; padding-bottom: 10px;border-bottom: 1px solid orange; margin-bottom: 10px">
            <div style="color: orange;flex: 1"><strong style="font-size: 24px">读书</strong> 活动</div>
            <div style="cursor: pointer" @click="goPage('/front/activity')">更多>></div>
          </div>
          <div>
            <div @click="goPage('/front/activityDetail?id='+item.id)" v-for="item in data.activityList" :key="item.id" style="margin-bottom: 20px">
              <div class="book-box">
                <img :src="item.img" style="width: 100%;height: 150px">
              </div>
              <div style="margin: 5px 0;font-size: 15px;color: #666" class="activity-item">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边区域结束-->
    </div>
  </div>
</template>
<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import img1 from "@/assets/img/1.jpg"
import img2 from "@/assets/img/2.png"
import img3 from "@/assets/img/3.jpg"

const data=reactive({
  categoryList:[],
  imgs:[img1,img2,img3],
  rankBookList:[],
  currentIndex:0,
  newBookList:[],
  postsList:[],
  activityList:[],
  recommendBookList:[]
})

request.get('posts/selectHot').then(res=>{
  data.postsList=res.data
})

request.get('category/selectAll').then(res=>{
  data.categoryList=res.data
})
request.get('book/selectHot').then(res=>{
  data.rankBookList=res.data
})

request.get('book/selectAll').then(res=>{
  data.newBookList=res.data.splice(0,8)
})
request.get('activity/selectAll').then(res=>{
  data.activityList=res.data.splice(0,4)
})

request.get('book/selectAll',{
  params:{
    recommend:true
  }
}).then(res=>{
  data.recommendBookList=res.data.splice(0,8)
})

const changeIndex = (index) => {
  data.currentIndex=index
}
const goPage = (path) => {
  location.href = path
}
</script>
<style scoped>
a:hover{
  color: cornflowerblue!important;
  text-decoration: underline;
  font-weight: bold;
}
.el-carousel__item{
  background-size: cover!important;
}
.activity-item:hover{
  cursor: pointer;
  color: #1890ff!important;
  font-weight: bold;
  text-decoration: underline;
}
.book-box{
  overflow: hidden;
}

.book-box:hover img{
  cursor: pointer;
  scale: 1.1;
}

.book-box img{
  transition: all 0.2s;
}
</style>